@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');


:root {
  /* Basiskleuren */
  --color-white: #FFF;
  --color-black: #000;
  --color-grey-light: #f2f2f2;
  --color-grey-mid: #e6e6e6;
  --color-grey-dark: #cccccc;
  --color-grey-darker: #808080;
  --color-grey-bg-alt: #fafafa;
  
  /* Primair thema */
  --color-primary: #745657;
  --color-primary-alt: #F0EBE1;
  --color-primary-alt-dark:#745657;
  
  --color-link:#E3366F;
  --color-button:#E3366F;
  --color-button-hover:#745657;
  --color-menu-button:#B92D5B;
  --color-menu-button-hover:#E3366F;
  --color-menu-button-active:#E3366F;

  /* Danger / fout */
  --color-danger: #cc6665;
  --color-danger-hover: #bf403f;
  --color-danger-bg: #f8d7da;
  --color-danger-text: #721c24;

  /* Admin menu */
  --color-admin-bg: #f8bc9e;
  --color-admin-bg-hover: #fdede5;
  --color-admin-sub: #f9c3a8;
  --color-admin-active: #fbddce;

  /* Badge kleuren */
  --color-warning-bg: #fff3cd;
  --color-warning-text: #856404;
  --color-success-bg: #d4edda;
  --color-success-text: #155724;
  --color-info-bg: #d1ecf1;
  --color-info-text: #0c5460;

  /* Borders en schaduwen */
  --color-border-light: #e6e6e6;
  --color-border-mid: #cccccc;
  --color-border-modal: #ccc;
  --color-shadow-dark: rgba(0, 0, 0, 0.5);
  --color-border-price: rgba(255, 255, 255, 0.1);
}


/* default.css */
body {
  background-color: var(--color-white);
  color: var(--color-black);
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
}
a {
  color: var(--color-link);
}
button,
.button {
  background-color: var(--color-button);
  color: var(--color-white);
}
button:hover,
.button:hover {
  background-color: var(--color-button-hover);
}
button.secondary,
.button.secondary {
  background-color: var(--color-grey-light);
  color: var(--color-black);
}
button.secondary:hover,
.button.secondary:hover {
  background-color: var(--color-grey-mid);
}
button.danger,
.button.danger {
  background-color: var(--color-danger);
  color: var(--color-white);
}
button.danger:hover,
.button.danger:hover {
  background-color: var(--color-danger-hover);
}
input,
textarea,
select {
  background-color: var(--color-grey-light);
  color: var(--color-black);
  border: 1px solid var(--color-border-light);
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-grey-dark);
}
.header {
  background-color: var(--color-primary);
  box-shadow: 0 2px 5px var(--color-shadow-dark);
  color: var(--color-white);
}
.header > a {
  color: var(--color-white);
}
.footer {
  background-color: var(--color-primary);
  box-shadow: 0 -2px 5px var(--color-shadow-dark);
  color: var(--color-white);
}
.menu {
  background-color: black;
  box-shadow: 2px 0 5px var(--color-shadow-dark);
  color: var(--color-white);
}
.main {
  background-color: var(--color-white);
}
.menu > ul > li > a {
  background: var(--color-menu-button);
  color: var(--color-white);
}
.menu > ul > li > span {
  background: var(--color-primary-alt);
}
.menu > ul > li > span:hover {
  background: var(--color-primary-alt-hover);
}
.menu > ul > li > ul {
  background: var(--color-primary-alt-dark);
}
.menu > ul > li > ul > li > a {
  color: var(--color-white);
}
.menu > ul > li > ul > li > a:hover {
  color: var(--color-grey-mid);
}
.menu > ul > li > ul > li.active > a {
  border-left: 5px solid var(--color-menu-button-active);
}
.menu > ul > li.active > a {
  background: var(--color-menu-button-active);
}
.menu > ul > li.active > span {
  background: var(--color-menu-button-active);
}
.menu > ul > li:hover > a {
  background: var(--color-menu-button-active);
}
.menu > ul.admin > li > a {
  background: var(--color-admin-bg);
  color: var(--color-black);
}
.menu > ul.admin > li > span {
  background: var(--color-admin-bg);
  color: var(--color-black);
}
.menu > ul.admin > li > span:hover {
  background: var(--color-admin-bg-hover);
}
.menu > ul.admin > li > ul {
  background: var(--color-admin-sub);
}
.menu > ul.admin > li > ul > li > a {
  color: var(--color-black);
}
.menu > ul.admin > li > ul > li > a:hover {
  color: var(--color-black);
}
.menu > ul.admin > li > ul > li.active > a {
  border-left: 5px solid var(--color-admin-active);
}
.menu > ul.admin > li.active > a {
  background: var(--color-admin-active);
}
.menu > ul.admin > li.active > span {
  background: var(--color-admin-active);
}
.menu > ul.admin > li:hover > a {
  background: var(--color-admin-active);
}
.mobilemenu {
  color: var(--color-white);
}
.logout {
  color: var(--color-white);
}
@media (max-width: 768px) {
  .menu_bg {
    background: rgba(0, 0, 0, 0.1);
  }
}
.table.message .table_tr > .table_td {
  background-color: var(--color-danger-bg);
  color: var(--color-danger-text);
}
table.overview > thead > tr > th {
  background: var(--color-grey-dark);
}
table.overview > tbody > tr:nth-child(even) > td {
  background: var(--color-grey-bg-alt);
}
table.overview > tbody > tr:hover > td {
  background: var(--color-grey-light);
}
.table.form > .table_tbody > .table_tr > .table_td.error {
  color: var(--color-danger-bg);
}
.table.form > .table_tbody > .table_tr > .table_td.message {
  color: var(--color-grey-darker);
}
.table.form > .table_tbody > .table_tr:nth-child(odd) {
  background: var(--color-grey-bg-alt);
}
.badge.badge-danger,
.badge.badge-error {
  background-color: var(--color-danger-bg);
  color: var(--color-danger-text);
}
.badge.badge-warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-text);
}
.badge.badge-success {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}
.badge.badge-info {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}
.standalone {
  background: var(--color-primary);
}
.standalone > .content {
  background: var(--color-white);
}
.notification_container > .notification.danger,
.notification_container > .notification.error {
  background-color: var(--color-danger-bg);
  color: var(--color-danger-text);
}
.notification_container > .notification.warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-text);
}
.notification_container > .notification.success {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}
.notification_container > .notification.info {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}
.wysiwyg-editor {
  background: var(--color-white);
}
.modal {
  background: var(--color-white);
  border: 1px solid var(--color-border-modal);
}

/* default.cards.css */
.cards > .row > .card {
  background: var(--color-grey-light);
}
.cards > .row > .card > .actions > a:hover {
  background: var(--color-grey-mid);
}

/* module.client_subscription.css */
.sub_overview {
  background: var(--color-grey-light);
}
.sub_overview > li > .item {
  background: var(--color-grey-mid);
}
.sub_overview > li > .item > span.info {
  background: var(--color-grey-light);
}
.product_overview {
  background: var(--color-grey-light);
}
.product_overview > li > .item {
  background: var(--color-primary);
  color: var(--color-white);
}
.product_overview > li > .item > span.price {
  border-bottom: 1px solid var(--color-border-price);
}

/* module.settings.css */
.sub_overview {
  background: var(--color-grey-light);
}
.sub_overview > li > .item {
  background: var(--color-grey-mid);
}
.sub_overview > li > .item > span.info {
  background: var(--color-grey-light);
}
.product_overview {
  background: var(--color-grey-light);
}
.product_overview > li > .item {
  background: var(--color-primary);
  color: var(--color-white);
}
.product_overview > li > .item > span.price {
  border-bottom: 1px solid var(--color-border-price);
}